import Taro, {Component} from '@tarojs/taro'
import {View, Image, Text} from '@tarojs/components'
// import { initLottie} from '../../utils/lottie'
// import lottie from 'lottie-miniapp';
// import * as animationData from '../../assets/lottie/empty.json'
import './index.scss'

// import emptyImage from '../../assets/img/empty/empty.gif'

class Empty extends Component {
  constructor(props) {
    super(props)
  }

  static options = {
    addGlobalClass: true
  }

  config = {
    navigationBarTitleText: ''
  }

  componentWillMount() {

  }

  componentDidMount() {
    // this.initLottie('empty-canvas')
  }

  componentDidShow() {
  }

  componentDidHide() {
  }

  componentCatchError() {
  }

  initLottie(canvasId) {

    // Taro.createSelectorQuery().in(this.$scope).select(`#${canvasId}`).node(res => {
    //   const canvas = res.node
    //   const context = canvas.getContext('2d')
    //   const dpr = Taro.getSystemInfoSync().pixelRatio
    //   canvas.width = res.node.width * dpr
    //   canvas.height = res.node.height * dpr
    //   // canvas.width = 40//设置宽高，也可以放到wxml中的canvas标签的style中
    //   // canvas.hight = 40
    //   lottie.setup(canvas)//要执行动画，必须调用setup,传入canvas对象

    //   lottie.loadAnimation({//微信小程序给的接口，调用就完事了，原理不太懂
    //     loop: true,//是否循环播放（选填）
    //     autoplay: true,//是否自动播放（选填）
    //     animationData: animationData,
    //     // path:'',
    //     // path:'https://cdn.你的域名.com/aaa.json',//lottie json包的网络链接，可以防止小程序的体积过大，要注意请求域名要添加到小程序的合法域名中
    //     rendererSettings:{
    //       context//es6语法：等同于context:context（必填）,
    //     }
    //   })
    // }).exec()


    // const canvasContext = Taro.createCanvasContext(canvasId,this.$scope);
    // //  请求到的lottie json数据
    // // const animationData = {};
    // // 请求lottie的路径。注意开启downloadFile域名并且返回格式是json
    // // const animationPath = 'http://qiniupublic.fortunemy.top/empty.json';
    // const query = Taro.createSelectorQuery().in(this.$scope)               // 创建节点查询器 query
    // query.select(`#${canvasId}`).boundingClientRect().exec((res) => {
    //
    //       // // 指定canvas大小
    //     const dpr = Taro.getSystemInfoSync().pixelRatio
    //     canvasContext.canvas = {
    //       width: res[0].width,
    //       height: res[0].height
    //     };
    //     // 如果同时指定 animationData 和 path， 优先取 animationData
    //     lottie.loadAnimation({
    //       renderer: 'canvas', // 只支持canvas
    //       loop: true,
    //       autoplay: true,
    //       animationData: animationData,
    //       path: '',
    //       rendererSettings: {
    //         context: canvasContext,
    //         clearCanvas: true
    //       }
    //     });
    // })

  }


  render() {
    const height = '400px'
    return (
      <View className="empty" style={{height}}>
        {/* <Canvas type="2d" id="empty-canvas" className="empty-canvas"></Canvas> */}
        {/* <Canvas id="empty-canvas" canvasId="empty-canvas" className="empty-canvas"></Canvas> */}
        <Image mode="widthFix" className="empty-canvas"
               src='http://qiniu.fortunemy.top/empty.gif?e=316952102464&token=vMz5QGt25AGcG8iJfhhQMXatMizSa2NgUR8QJaU1:urdMI4bzyUJ5zP3DTfJlln5z6vU='
               lazyLoad webp></Image>
        <Text className="">暂无数据</Text>
      </View>
    )
  }
}

export default Empty
